<div class="animate">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <img class="card-img-top img-responsive" width="100%" src="http://line25.com/wp-content/uploads/2013/nature/header.jpg" alt="Image">
                    <div class="card-block">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="Javascript:void(0);" class="btn btn-primary">Button</a>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inverse card-danger card-header">
                        <h5 class="card-inverse card-title">
                            Danger Card
                        </h5>
                    </div>
                    <div class="card-block">
                        <div class="card">
                            <img class="card-img-top" width="100%" src="http://orig08.deviantart.net/43e5/f/2011/248/6/2/__nature_avatar___banner_by_boadiceakiss-d48xri7.png" alt="Image">
                            <div class="card-block">
                                <h4 class="card-title">Card title</h4>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Cras justo odio</li>
                                <li class="list-group-item">Dapibus ac facilisis in</li>
                            </ul>
                            <div class="card-block">
                                <a href="Javascript:void(0);" class="card-link">Card link</a>
                                <a href="Javascript:void(0);" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inverse card-success card-header">
                        <h5 class="card-inverse card-title">
                            Header & Footer
                            </h5>
                    </div>
                    <div class="card-block">
                        <div class="card text-xs-center">
                            <div class="card-header">
                                Featured
                            </div>
                            <div class="card-block">
                                <h4 class="card-title">Title</h4>
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="Javascript:void(0);" class="btn btn-primary">Go somewhere</a>
                            </div>
                            <div class="card-footer text-muted">
                                2 days ago
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header card-default">
                        <h5 class="card-title">Background variants</h5>
                    </div>
                    <div class="row card-block">
                         <div class="col-lg-4 text-xs-center">
                            <div class="card-block card-inverse card-primary form-group">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-lg-4 text-xs-center">
                            <div class="card-block card-inverse form-group card-success">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-lg-4 text-xs-center">
                            <div class=" card-block card-inverse form-group card-info">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-lg-4 text-xs-center">
                            <div class=" card-block card-inverse form-group card-danger">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-lg-4 text-xs-center">
                            <div class=" card-block card-inverse form-group card-warning">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                        <div class="col-lg-4 text-xs-center">
                            <div class="card  card-block card-default form-group">
                                <blockquote class="card-blockquote">
                                <h4 class="text-default">Title</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header card-default">
                                <h5 class="card-title">Text alignment
                                </h5>
                            </div>
                            <div class="card-block">
                                <div class="row">
                                    <div class="col-lg-4 text-xs-left">
                                        <div class="card card-default card-block">
                                            <blockquote class="card-blockquote">
                                            <h4 class="text-default">Title</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                                <a href="Javascript:void(0);" class="btn btn-primary">Go somewhere</a>
                                            </blockquote>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 text-xs-center">
                                        <div class="card card-default card-block">
                                            <blockquote class="card-blockquote">
                                            <h4 class="text-default">Title</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                                <a href="Javascript:void(0);" class="btn btn-primary">Go somewhere</a>
                                            </blockquote>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 text-xs-right">
                                        <div class="card card-default card-block ">
                                            <blockquote class="card-blockquote">
                                            <h4 class="text-default">Title</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et, suscipit non nihil voluptates, maxime ad dignissimos vitae.</p>
                                                <a href="Javascript:void(0);" class="btn btn-primary">Go somewhere</a>
                                            </blockquote>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-inverse card-info card-header">
                        <h5 class="card-inverse card-title">
                            Hello World!
                        </h5>
                    </div>
                    <div class="card-block ">
                        <blockquote class="blockquote">Start by doing what's necessary; then do what's possible; and suddenly you are doing the impossible. <footer> Francis of Assisi </footer> </blockquote>
                        <blockquote class="blockquote blockquote-reverse">
                            <p class="m-b-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                        </blockquote>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
